<template>
  <div class="CallSyncTask">
    <!-- 自定义 header slot -->
    <div slot="title" class="CallSyncTask-dialog-title">
      <span class="CallSyncTask-title-text">同步参数配置</span>
      <img
        src="@/assets/images/taskDefinition/close.png"
        alt=""
        @click="closeDialog"
      />
    </div>
    <!-- 这里是你自定义的内容 -->
    <div class="CallSyncTask-dialog-content">
      <!-- 可以添加任何自定义内容 -->
      <!-- 如果是地图页面进入的，就不显示这部分了 -->
      <div>
        <el-form ref="form" :model="form" label-width="130px">
          <el-row class="CallSyncTask-row">
            <el-col :span="24" v-if="type == '任务管理'">
              <el-form-item label="同步方式：">
                <div class="CallSyncTask-select">
                  <el-select
                    v-model="form.syncType"
                    placeholder="请选择同步方式"
                    @change="changeSyncType"
                  >
                    <el-option label="有线" :value="0"></el-option>
                    <el-option label="空口" :value="1"></el-option>
                    <el-option label="北斗短消息" :value="2"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="CallSyncTask-row">
            <el-col :span="24">
              <el-form-item label="远端地址：">
                <div class="CallSyncTask-input">
                  <el-input
                    v-model="form.remoteAddress"
                    placeholder="请输入远端地址"
                    :disabled="form.syncType != 0"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="fre-table saveBtn" @click="defineTask">同步</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CallSyncTask",
  data() {
    return {
      form: {
        syncType: 0, // 同步方式，0：有线，1：空口，2：北斗短消息
        remoteAddress: "", // 远端地址，非必须，有线同步时输入的对端ip
      },
    };
  },
  computed: {},
  watch: {},
  components: {},
  props: {
    type: { type: String, default: "任务管理" },
  },
  methods: {
    // 切换同步方式
    changeSyncType(val) {
      // 切换同步方式
      // 需要清空远端地址
      this.form.remoteAddress = "";
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 确定任务定义
    defineTask() {
      this.$emit("sendData", this.form);
      this.$emit("closeDialog");
    },
  },
  mounted() {},
};
</script>
<!-- 因为是弹窗，所以全局方法 -->
<style lang="scss" scoped>
.CallSyncTask {
  position: relative;
  width: 100%; /* 自定义弹窗宽度 */
  background: url("~@/assets/images/taskDefinition/define-background.png")
    no-repeat;
  background-size: 100% 100%;
  .CallSyncTask-title {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1.125rem;
    margin: 0px 0.625rem 0.625rem 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    .CallSyncTask-title-text {
      background: url("~@/assets/images/taskDefinition/vice-title.png")
        no-repeat;
      background-size: 100% 100%;
      flex: 1;
      padding-left: 1.5626rem;
    }
  }
  .CallSyncTask-dialog-title {
    font-size: 1.375rem;
    font-weight: bold;
    background: url("~@/assets/images/taskDefinition/title.png") no-repeat;
    background-size: 100% 100%;
    height: 3.125rem;
    line-height: 3.125rem;
    margin: 0.3125rem;
    padding: 0 1.25rem;
    color: #b7e7fc;
    position: relative;
    .CallSyncTask-title-text {
      text-align: left;
    }
    img {
      width: 1.5626rem;
      height: 1.5626rem;
      float: right;
      margin-top: 0.75rem;
      cursor: pointer;
    }
  }
  .CallSyncTask-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem;
    .CallSyncTask-select,
    .CallSyncTask-input {
      width: 12.5rem;
      position: relative;
    }
    .CallSyncTask-select-small,
    .CallSyncTask-input-small {
      width: 7.5rem;
      position: relative;
    }
    .CallSyncTask-select-mini,
    .CallSyncTask-input-mini {
      width: 5.625rem;
      position: relative;
    }

    .CallSyncTask-cron {
      display: flex;
      flex-direction: row;
      align-items: center;
      .fre-table:hover {
        color: aqua;
      }
      .CallSyncTask-cron-select {
        width: 6.0625rem;
        margin-right: 0.375rem;
      }
      .CallSyncTask-cron-date {
        width: 11.1875rem;
        margin-right: 0.375rem;
      }
    }
    .CallSyncTask-row {
      margin-bottom: 10px;
    }
  }
}
.saveBtn {
  text-align: center;
}

.Unit {
  display: inline-block;
  width: 3.4375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: left;
  position: absolute;
  right: -3.625rem;
  font-size: 1.25rem;
  color: #fff;
}
.Unit-small {
  display: inline-block;
  width: 1.75rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: left;
  position: absolute;
  right: 0px;
  font-size: 0.75rem;
  color: #fff;
}

.fre-table {
  width: 5.625rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
  background: url("~@/assets/images/taskDefinition/btn.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.625rem;
  cursor: pointer;
}

.CallSyncTask-input-radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 2.9375rem;
  height: 2.9375rem;
}

.edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色遮罩 */
  z-index: 999; /* 确保遮罩层在最上层 */
}
</style>
